<template>
  <view class="container">
    
    <view class="title">
      <view class="font-36 text-bold">{{detail.title}}</view>
      <view class="font-24">
        <text class="c-a4">发布于 {{$util.timeStampTurnTime(detail.create_time)}}</text>
      </view>
    </view>
    <view class="content" v-if="detail.content">
        <rich-text :nodes="detail.content" :data-nodes="detail.content"></rich-text>
    </view>
    <!-- 评论区域 -->
    <view class="comments-section">
      <view class="font-36 text-bold p-b-20 m-b-20 border-bottom">评论 ({{detail.comment_num || 0}})</view>
      <comment :commentList="commentList"></comment>
    </view>
    <!-- 底部固定栏 -->
    <view class="fixfooter bottom-safe-area">
      <view class="footer-bar">
        <view class="bar-item" @click="handleLike" v-if="isZan == 0">
          <text class="iconfont">&#xe615;</text>
          <text class="count">{{detail.zan_num || 0}}</text>
        </view>
        <view class="bar-item" @click="handleLike" v-else>
          <text class="iconfont color-title2">&#xe615;</text>
          <text class="count color-title2">{{detail.zan_num || 0}}</text>
        </view>
        <view class="bar-item" @click="openComment">
          <text class="iconfont">&#xe614;</text>
          <text class="count">{{detail.comment_num || 0}}</text>
        </view>
        <button class="bar-item" open-type="share">
          <text class="iconfont">&#xe616;</text>
          <text class="text">分享</text>
        </button>
      </view>
      <view class="bottom-safe-area"></view>
    </view>

    <!-- 评论弹出层 -->
    <comment-pop :show="showComment" :articleId="detail.article_id"  @close="closeComment" v-if="showComment"></comment-pop>
  </view>
</template>

<script>
import htmlParser from '@/common/js/html-parser';
import comment from '../../components/comment/comment.vue';
import commentPop from '../../components/commentPop/commentPop.vue';
  export default {
    components: {
      comment,
      commentPop
    },
    data() {
      return {
        id: '',
        detail: {},
        showComment: false,
        isZan: 0,
        commentList: [],   // 评论列表
        page: 1,

      }
    },
    onLoad(e) {
      this.id = e.id;
      this.getDetail()
      this.getCommentList();
      if(uni.getStorageSync('token')) {
        // 查询接口，获取文章是否点赞
        this.getLikeStatus();
      }

    },
    onReachBottom() {
      this.page += 1;
      this.getCommentList();
    },
    methods: {
      closeComment() {
        this.showComment = false;
        this.getDetail();
      },
      openComment() {
        this.showComment = true;
      },
      getDetail() {
        this.$api.sendRequest({
          url: "/api/community/articleDetail",
          data: {
            article_id: this.id
          },
          success: res => {
            if(res.code == 0) {
              	this.detail = res.data;

                if (this.detail.content) this.detail.content = htmlParser(this.detail.content);

                uni.setNavigationBarTitle({
                  title: this.detail.title
                })

            }else {
              this.$util.showToast({title: res.message})
            }
          }
        })
      },
      getLikeStatus() {
        this.$api.sendRequest({
          url: "/api/communityarticlezan/iszan",
          data: {
            article_id: this.id
          },
          success: res => {
            if(res.code == 0) {
              this.isZan = res.data;  //1已点赞0未点赞
            }else {
              this.$util.showToast({title: res.message})
            }
          }
        })

      },
      handleLike() {
        if(this.isZan == 0) {
          // 未点赞，点击后变为已点赞
          this.$api.sendRequest({
            url: "/api/communityarticlezan/add",
            data: {
              article_id: this.id
            },
            success: res => {
              if(res.code == 0) {
                this.detail.zan_num += 1;
                this.isZan = 1;
                
              }else {
                this.$util.showToast({
                  title: res.message,
                  icon: 'none'
                })
              }
            }
          })
        }else {
          // 已点赞，点击后变为未点赞
          this.$api.sendRequest({
            url: "/api/communityarticlezan/delete",
            data: {
              article_id: this.id
            },
            success: res => {
              if(res.code == 0) {
                this.detail.zan_num -= 1;
                this.isZan = 0;
              }else {
                this.$util.showToast({
                  title: res.message,
                  icon: 'none'
                })
              }
            }
          })
        }
      },
      //获取文章的评论列表
      getCommentList() {
        this.$api.sendRequest({
          url: "/api/communityarticlecomment/page",
          data: {
            article_id: this.id,
            page: this.page,
          },
          success: res => {
            if(res.code == 0) {
              if(this.page == 1) this.commentList = [];
              this.commentList = [...this.commentList, ...res.data.list];

              // 数组双层循环，先循环评论，将评论中的图片字符串逗号分隔，转为数组，再循环回复，将回复中的图片字符串逗号分隔，转为数组
              this.commentList.forEach(item => {

                if (item.image) {
                  // 先判断有没有逗号，如果有就分隔为数组
                  if (item.image.indexOf(',') > -1) {
                    item.image = item.image.split(',')
                  }else {
                    item.image = [item.image]
                  }
                }

                if (item.child && item.child.length > 0) {
                  item.child.forEach(reply => {
                    if (reply.image) {
                      // 先判断有没有逗号，如果有就分隔为数组
                      if (reply.image.indexOf(',') > -1) {
                        reply.image = reply.image.split(',')
                      }else {
                        reply.image = [reply.image]
                      }
                    }
                  })
                }

              })

              this.$forceUpdate();
              console.log(this.commentList)

              
            }else {
              this.$util.showToast({title: res.message})
            }
          }
        })
      },
    },
    //分享
    onShareAppMessage() {
      return {
        title: this.detail.title,
        path: `/otherpages/community/zxinfo?id=${this.id}`,
        imageUrl: ''
      }
    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
.title {
  margin: 30rpx;
  border-bottom: 1px solid #EEEEFD;
  padding-bottom: 30rpx;
}
.content {
  margin: 30rpx;
}


  
  .footer-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 0;
    
    .bar-item {
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #333;
        margin-right: 14rpx;
      }
      
      .count,
      .text {
        font-size: 32rpx;
        color: #172140;
      }
    }
  }


.comments-section {
  margin: 30rpx;
}

button {
  margin: 0;
  background: none;
  font-size: 32rpx;
  padding: 0;
}
</style>
